<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录与注册</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <style>
        :root {
            --primary-color: #009688;
            --input-height: 46px;
            --card-radius: 12px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
            padding: 15px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #333;
        }

        .card-container {
            width: 100%;
            max-width: 420px;
            position: relative;
            min-height: 560px;
            display: block;
            justify-content: center;
            align-items: center;
        }

        .cards-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.4s ease;
        }

        .login-card, .register-card {
            background-color: white;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            border-radius: var(--card-radius);
            padding: 35px 30px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition:
                    transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
                    opacity 0.4s ease;
            overflow: hidden;
        }

        .login-card {
            transform: translateX(0);
            opacity: 1;
            z-index: 1;
        }

        .register-card {
            transform: translateX(120%);
            opacity: 0;
            z-index: 0;
        }

        .card-container.show-register .login-card {
            transform: translateX(-120%);
            opacity: 0;
        }

        .card-container.show-register .register-card {
            transform: translateX(0);
            opacity: 1;
            z-index: 1;
        }

        .login-card::before, .register-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--primary-color);
            background: linear-gradient(90deg, #009688 0%, #35b8ad 100%);
        }

        .demo-login-container, .demo-register-container {
            width: 100%;
        }

        h2 {
            text-align: center;
            margin-bottom: 28px;
            font-size: 24px;
            font-weight: 600;
            color: #333;
            letter-spacing: 0.5px;
            position: relative;
        }

        .layui-form-item {
            margin-bottom: 22px;
        }

        .layui-input-wrap {
            position: relative;
        }

        .layui-input-prefix {
            position: absolute;
            left: 0;
            top: 0;
            width: var(--input-height);
            height: var(--input-height);
            text-align: center;
            line-height: var(--input-height);
            color: #999;
            z-index: 2;
        }

        .layui-input {
            height: var(--input-height);
            line-height: var(--input-height);
            padding-left: var(--input-height);
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            font-size: 15px;
            transition: all 0.3s;
            width: 100%;
        }

        .layui-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.15);
            outline: none;
        }

        .remember-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        /* 新增：登录类型选择器样式 */
        .login-type-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px;
            justify-content: center;
        }

        .login-type-selector label {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .login-type-selector input[type="radio"] {
            margin-right: 5px;
        }

        .layui-btn {
            height: var(--input-height);
            line-height: var(--input-height);
            border-radius: 8px;
            background-color: var(--primary-color);
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 1px;
            transition: all 0.3s;
            border: none;
            color: #fff;
            cursor: pointer;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .layui-btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: 0.5s;
        }

        .layui-btn:hover::after {
            left: 100%;
        }

        .layui-btn:hover {
            opacity: 0.95;
            box-shadow: 0 5px 15px rgba(0, 150, 136, 0.3);
        }

        .social-login {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 25px;
            padding-top: 25px;
            border-top: 1px solid #f0f0f0;
            font-size: 14px;
            color: #666;
        }

        .social-icons {
            display: flex;
            margin: 0 10px;
        }

        .social-icons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            margin: 0 5px;
            transition: all 0.3s;
            text-decoration: none;
        }

        .social-icons a:hover {
            transform: translateY(-3px);
            background-color: #f5f5f5;
        }

        .social-icons i {
            font-size: 20px;
        }

        .register-link, .login-link {
            margin-left: 5px;
            color: var(--primary-color);
            font-weight: 500;
            transition: all 0.2s;
            cursor: pointer;
            position: relative;
        }

        .register-link:hover, .login-link:hover {
            text-decoration: underline;
        }

        .register-link::after, .login-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }

        .register-link:hover::after, .login-link:hover::after {
            width: 100%;
        }

        .login-message {
            text-align: center;
            margin-bottom: 15px;
            font-size: 14px;
            height: 20px;
        }

        .login-message.success {
            color: #009688;
        }

        .login-message.error {
            color: #ff5722;
        }

        .form-footer {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-size: 13px;
        }

        .toggle-text {
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
            color: #666;
        }

        .toggle-link {
            color: var(--primary-color);
            cursor: pointer;
            font-weight: 500;
            margin-left: 5px;
        }

        .form-center {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        @media (max-width: 480px) {
            .login-card, .register-card {
                padding: 25px 20px;
            }

            .card-container {
                min-height: 520px;
            }

            h2 {
                font-size: 22px;
                margin-bottom: 20px;
            }

            .layui-form-item {
                margin-bottom: 18px;
            }
        }
    </style>
</head>
<body>
<link rel="stylesheet" href="/css/sweetalert2.css">
<script src="/js/sweetalert2.js"></script>
<div class="card-container">
    <div class="login-message" id="status-message"></div>
    <div class="cards-wrapper">
        <!-- 登录卡片 -->
        <div class="login-card">
            <form class="layui-form" method="post" action="/api/account/login">
                <div class="demo-login-container">
                    <div th:if="${message != null}">
                        <script th:inline="javascript">
                            document.addEventListener('DOMContentLoaded', function() {
                                const message = /*[[${message}]]*/ '';
                                Swal.fire({
                                    text: message,        // 设置弹窗内容
                                    toast: true,          // 启用toast模式
                                    position: 'top-end',  // 右上角显示
                                    showConfirmButton: false, // 不显示确认按钮
                                    timer: 1500,          // 持续3秒(3000毫秒)
                                    background: '#ff0000',
                                    color: '#ffffff'
                                });
                            });
                        </script>
                    </div>
                    <h2>用户登录</h2>

                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
                            <input type="text" name="phone" placeholder="手机号" autocomplete="off" class="layui-input" id="phone-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="password" placeholder="密码" autocomplete="off" class="layui-input" id="password-input">
                        </div>
                    </div>

                    <!-- 修改：使用三选一单选按钮替换复选框 -->
                    <div class="layui-form-item">
                        <div class="login-type-selector">
                            <label>
                                <input type="radio" name="loginType" value="1" checked title="求职者">
                            </label>
                            <label>
                                <input type="radio" name="loginType" value="2" title="招聘者">
                            </label>
                            <label>
                                <input type="radio" name="loginType" value="3" title="管理">
                            </label>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login-form">登 录</button>
                    </div>

                    <div class="social-login">
                        <span>没有账号？</span>
                        <span class="register-link">立即注册</span>
                    </div>

                    <div class="form-footer">
                        登录即表示您同意我们的<a href="#" style="color: var(--primary-color);">服务条款</a>和<a href="#" style="color: var(--primary-color);">隐私政策</a>
                    </div>
                </div>
            </form>
        </div>

        <!-- 注册卡片 -->
        <div class="register-card">
            <form class="layui-form">
                <div class="demo-register-container">
                    <h2>用户注册</h2>

                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-cellphone"></i>
                            </div>
                            <input type="text" name="phone" placeholder="手机号" autocomplete="off" class="layui-input" id="reg-phone">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="password" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="confirm_password" placeholder="确认密码" autocomplete="off" class="layui-input" id="confirm-password">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="login-type-selector">
                            <label>
                                <input type="radio" name="registerType" value="1" checked title="求职者">
                            </label>
                            <label>
                                <input type="radio" name="registerType" value="2" title="招聘者">
                            </label>
                        </div>
                    </div>

                    <div class="form-center">
                        <div class="layui-form-item" style="width: 100%; max-width: 420px;">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register-form">注 册</button>
                        </div>
                    </div>

                    <div class="toggle-text">
                        已有帐号？<span class="toggle-link login-link">立即登录</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化LayUI模块
        layui.use(['form', 'layer'], function() {
            const form = layui.form;
            const layer = layui.layer;
            const $ = layui.$;

            // 注册链接点击事件
            document.querySelector('.register-link').addEventListener('click', function() {
                document.querySelector('.card-container').classList.add('show-register');
                resetMessages();
            });

            // 登录链接点击事件
            document.querySelector('.login-link').addEventListener('click', function() {
                document.querySelector('.card-container').classList.remove('show-register');
                resetMessages();
            });

            // 监听登录表单提交
            form.on('submit(login-form)', function(data){
                const field = data.field;
                const phone = field.phone;
                const password = field.password;
                // 获取选择的登录类型
                const loginType = field.loginType; // 默认为管理登录

                // 表单验证
                if (!phone) {
                    setMessage('请输入手机号');
                    return false;
                }

                if (!/^1[3-9]\d{9}$/.test(phone)) {
                    setMessage('手机号格式不正确');
                    return false;
                }

                if (!password) {
                    setMessage('请输入密码');
                    return false;
                }

                const loading = layer.msg('正在验证，请稍候...', {icon: 16, time: 0});
                $.ajax({
                    url:"api/account/login",
                    type:"post",
                    data:{
                        phone: phone,
                        password: password,
                        loginType: loginType // 提交登录类型
                    },
                    success: function (res){
                        layer.close(loading);
                        resetMessages();

                        if(res.code === 200){
                            layer.alert('欢迎回来：' + res.msg, {
                                icon: 1,
                                title: '登录成功'
                            }, function(index){
                                layer.close(index);
                                // 直接跳转到登录页面
                                window.location.href = "/";
                            });
                        }else if(400 <= res.code && res.code < 500){
                            showMessage(res.msg, 2);
                        }

                    },
                    error: function (e) {
                        layer.close(loading);
                        resetMessages();
                        showMessage(e.msg, 2);
                    }
                })

                return false; // 阻止表单跳转
            });

            // 监听注册表单提交
            form.on('submit(register-form)', function(data){
                const field = data.field;
                const phone = field.phone;
                const password = field.password;
                const registerType = field.registerType;
                const confirmPassword = field.confirm_password;

                if (!phone) {
                    setMessage('请输入手机号');
                    return false;
                }

                if (!/^1[3-9]\d{9}$/.test(phone)) {
                    setMessage('手机号格式不正确');
                    return false;
                }

                if (!password) {
                    setMessage('请输入密码');
                    return false;
                }

                if (password.length < 6 || password.length > 16) {
                    setMessage('密码长度应为6-16位');
                    return false;
                }

                if (password !== confirmPassword) {
                    setMessage('两次输入的密码不一致');
                    return false;
                }

                const loading = layer.msg('正在注册，请稍候...', {icon: 16, time: 0});
                $.ajax({
                    url:"api/account/register",
                    type:"post",
                    data:{
                        phone:phone,
                        password:password,
                        registerType:registerType
                    },
                    success: function (res){
                        layer.close(loading);
                        resetMessages();

                        if(res.code === 200){
                            layer.alert(res.msg, {
                                icon: 1,
                                title: '注册成功'
                            }, function(index){
                                layer.close(index);
                                // 直接跳转到登录页面
                                window.location.href = '/login';
                            });
                        }else if(400 <= res.code && res.code < 500){
                            showMessage(res.msg, 2);
                        }

                    },
                    error: function (e) {
                        layer.close(loading);
                        resetMessages();
                        showMessage(e.msg, 2);
                    }
                })

                return false; // 阻止表单跳转
            });

            // 显示消息
            function showMessage(message, icon) {
                layui.use('layer', function() {
                    var layer = layui.layer;
                    if (message) {
                        layer.msg(message, {
                            icon: icon,
                            time: 3000
                        });
                    }
                });
            }

            function setMessage(message) {
                document.getElementById('status-message').className = 'login-message error';
                document.getElementById('status-message').textContent = message;
            }

            // 重置消息
            function resetMessages() {
                document.getElementById('status-message').textContent = '';
                document.getElementById('status-message').className = 'login-message';
            }
        });
    });
</script>
</body>
</html>